import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from "antd";
import { getHosListDetailRequest } from "@/api/hospital/hospitalList";
import {
  useLocation,
  useNavigate,
  useParams,
  Location,
} from "react-router-dom";
import {
  hospitalDetailReturnType,
  hospitalListItemsType,
  BookingRuleType,
} from "@/api/hospital/model/hospitalListType";

//为了让useLocation可以使用state,我们需要封装一个自定义Hook
//自定义Hook可以接受一个泛型,这个泛型就是state属性值的类型
function useMyLocation<T>() {
  type L = Location & { state: T };
  return useLocation() as L;
}

export default function HospitalShow() {
  const { id } = useParams();
  const navigate = useNavigate();

  //使用自定义Hook拿到路由传值中state的值
  const location = useMyLocation<{ hello: string }>();
  const { hello } = location.state;
  console.log("hello", hello);

  //书写一个保存详细信息的状态
  const [detail, setDetail] = useState<hospitalDetailReturnType>({});
  console.log(useParams());

  //刚加载组件就发送详情数据请求
  useEffect(() => {
    const getHosDetail = async () => {
      const result = await getHosListDetailRequest(id as string);
      console.log(result, "res");
      setDetail(result);
    };
    getHosDetail();
  }, []);
  return (
    <div>
      <Card>
        <Descriptions title="基本信息" bordered column={2}>
          <Descriptions.Item label="医院名称">
            {(detail.hospital as hospitalListItemsType)?.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院logo">
            {(detail.hospital as hospitalListItemsType)?.logoData ? (
              <img
                width={100}
                src={`data:image/jpeg;base64,${
                  (detail.hospital as hospitalListItemsType)?.logoData
                }`}
              ></img>
            ) : (
              ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">
            {" "}
            {(detail.hospital as hospitalListItemsType)?.hoscode}
          </Descriptions.Item>
          <Descriptions.Item label="医院地址">
            {(detail.hospital as hospitalListItemsType)?.param?.fullAddress}
          </Descriptions.Item>
          <Descriptions.Item label="医院坐车路线" span={2}>
            {(detail.hospital as hospitalListItemsType)?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介" span={2}>
            {(detail.hospital as hospitalListItemsType)?.intro}
          </Descriptions.Item>
        </Descriptions>

        <Descriptions
          title="预约规则信息"
          bordered
          column={2}
          style={{ marginTop: "30px" }}
        >
          <Descriptions.Item label="预约周期">
            {(detail.bookingRule as BookingRuleType)?.cycle}
          </Descriptions.Item>
          <Descriptions.Item label="放号时间">
            {(detail.bookingRule as BookingRuleType)?.releaseTime}
          </Descriptions.Item>
          <Descriptions.Item label="停挂时间">
            {(detail.bookingRule as BookingRuleType)?.stopTime}
          </Descriptions.Item>
          <Descriptions.Item label="退号时间">
            {(detail.bookingRule as BookingRuleType)?.quitTime}
          </Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
            {(detail.bookingRule as BookingRuleType)?.rule.map(
              (item, index) => {
                return <p key={index}>{item}</p>;
              }
            )}
          </Descriptions.Item>
        </Descriptions>
        <Button
          style={{ marginTop: "30px" }}
          onClick={() => {
            navigate("/syt/hospital/hospitalList");
          }}
        >
          返回
        </Button>
      </Card>
    </div>
  );
}
